<template>
  <div class="container">
    <div class="border-b bg-color-white pad-13">
      <div class="align-c width-per-100">
        <div class="flex v-align-c" @click="showPicker">
          <label class="align-c mar-r-3">{{ pickerTypeVal ? pickerTypeVal : '全部' }}</label>
          <icon class="iconfont icon-tubiao- font-20"></icon>
        </div>
      </div>
    </div>
    <div class="panel mar-t-12 pad-23 align-c">
      <label class="font-orange font-21">￥56245.21</label>
    </div>
    <div class="panel pad-l-15 pad-r-15 pad-t-8 pad-b-12 mar-b-10"
     v-for="(item,index) in listData" :key="index">
      <div class="flex v-align-c pad-b-10">
        <div class="flex-item flex v-align-c">
          <img :src="memberInfo.avatar" class="width-28 height-28 mar-r-10 avatar-pic" />
          <div class="font-14">{{item.customerNickname}}</div>
        </div>
        <span class="font-14 font-light-red">{{item.orderStatusName}}</span>
      </div>
      <div class="flex font-10 v-align-c border-t border-b pad-t-18  pad-b-18"
          v-for="(itemSub, indexSub) in item.orderGoodsList" :key="indexSub">
        <img :src="itemSub.goodsImageUrl" class="width-66 height-66 mar-r-10 border-radius-5" />
        <div class="flex-item">
          <div class="font-14 title-line mar-b-10">{{itemSub.goodsTitle}}</div>
          <div class="align-r font-12 flex v-align-c">
            共{{itemSub.goodsNum}}件商品 
             <span class="font-15 mar-l-5 font-red">
             ￥{{itemSub.goodsPrice * itemSub.goodsNum}}</span>
          </div>
        </div>        
      </div>
      <div class="flex font-10 font-gray v-align-c pad-t-12">
        <label class="flex-item"></label>
        <label>
          <button size="mini"
           class="primary-button mar-l-15"
           @click="detail(item.orderId)">查看详情</button>
        </label>
        <label>
          <button size="mini"
           class="primary-button red-btn mar-l-15"
           @click="buy(item.goodsId)">再次购买</button>
        </label>
      </div>      
    </div>
    <van-popup
      :show="isShowPicker"
      position="bottom"
      @close="onClose"
    >
      <van-picker
        show-toolbar
        :columns="pickerType"
        @cancel="onClose"
        @confirm="onConfirm"
      />
    </van-popup>    
  </div>
</template>

<script>
  import {
    pageIncomeExpense
  } from '@/api/personal'
  import {
    getMemberInfo
  } from '@/api/home'
  export default {
    data() {
      return {
        memberInfo: {},
        listData: [],
        listQuery: {
          memberId: '',
          currentPage: 1,
          size: 10
        },
        pullLoad: {
          loading: false,
          finished: false
        },
        isShowPicker: false,
        pickerType: [],
        pickerTypeVal: ''
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.initIncomeExpense()
      this.getMemberInfo()
      this.pickerType = ['全部', '状态1', '状态2']
    },
    onReachBottom() {
      if (!this.pullLoad.finished) {
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading'
        })
        this.initIncomeExpense()
      }
    },
    methods: {
      getMemberInfo() {
        getMemberInfo(this.getCustomerId).then(response => {
          if (response.isError) return
          this.memberInfo = response.data
          this.memberInfo.nickname = this.$utils.getStrByLength(this.memberInfo.nickname, 18)
          // veekrayStatus 萤火微客注册状态 -1:未注册 0:免费名片 1:付费名片
        })
      },
      showPicker() {
        this.isShowPicker = true
      },
      onClose() {
        this.isShowPicker = false
      },
      onConfirm(e) {
        this.isShowPicker = false
        this.pickerTypeVal = e.mp.detail.value
        this.listData = []
        this.listQuery.currentPage = 1
        this.initIncomeExpense()
      },
      initIncomeExpense() {
        this.listQuery.memberId = this.getCustomerId
        this.listQuery.type = ''
        this.listQuery.month = ''
        pageIncomeExpense(this.listQuery).then(response => {
          if (response.isError) return
          this.$pt.hideToast()
          this.commission = response.data
          response.data.page.records.forEach(item => {
            this.listData.push(item)
          })
          this.listData = [
            {
              customerNickname: 'tony',
              orderStatusName: '待发货',
              orderGoodsList: [
                {
                  orderId: 1,
                  goodsId: 2,
                  goodsImageUrl: 'https://img-1.joinsun.vip/upload/df3069e461a11914223590f618c5554f.jpg',
                  goodsTitle: 'FIRSTMIX日系夏季新款女装宽松开叉短袖上衣薄款休闲慵懒风T恤女',
                  goodsNum: 2,
                  goodsPrice: 65
                }
              ]
            },
            {
              customerNickname: 'tony',
              orderStatusName: '待发货',
              orderGoodsList: [
                {
                  orderId: 1,
                  goodsId: 2,
                  goodsImageUrl: 'https://img-1.joinsun.vip/upload/df3069e461a11914223590f618c5554f.jpg',
                  goodsTitle: 'FIRSTMIX日系夏季新款女装宽松开叉短袖上衣薄款休闲慵懒风T恤女',
                  goodsNum: 2,
                  goodsPrice: 65
                }
              ]
            }
          ]
          // 翻页+1
          this.listQuery.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.page.total) {
            this.pullLoad.finished = true
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .avatar-pic{
    border-radius: 100px;
  }
  .primary-button{    
    font-size: 13px;
    padding: 0px 8px;
    border-radius: 7px;
    background: #fff;
    border: #333 1px solid;
    color: #333;
    &.red-btn{
      border: #ec6700 1px solid;
      color: #ec6700;
    }
  }
  .panel{
    box-shadow: 0 0 0!important;
  }
  .income {
    margin-top: 10px;
  }

  .income-item {
    margin-top: -125px;
  }

  .mid-border {
    height: 30px;
  }

  .details {
    margin-top: 10px;
  }

  .userinfo-avatar {
    width: 45px;
    height: 45px;
    margin: 5px;
    margin-left: 10px;
    border-radius: 50%;
  }

  .list-nav {
    padding: 10px;
    font-size: 14px;
  }
</style>
